<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center">
      <p>用户ID： </p>
      <el-input v-model="dataForm.user_code" class="mr-8" placeholder="请输入用户ID"/>

      <p>用户昵称： </p>
      <el-input v-model="dataForm.nickname" class="mr-8" placeholder="请输入用户昵称"/>

      <!--      <p>认证类型： </p>-->
      <!--      <el-select v-model="dataForm.category_id" class="mr-4" clearable placeholder="请选择认证类型">-->
      <!--        <el-option-->
      <!--          v-for="item in typeList"-->
      <!--          :key="item.id"-->
      <!--          :label="item.name" :value="item.id"-->
      <!--        />-->
      <!--      </el-select>-->

      <p>申请时间： </p>
      <el-date-picker
        v-model="dateList"
        clearable
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="handleChangeData"
      />
      <el-button class="mr-4" type="info" @click="handleReset();initData()">重置</el-button>
      <el-button class="mr-4" type="primary" @click="initData()">搜索</el-button>
    </section>

    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="申请时间" prop="created_at"/>
      <el-table-column label="用户ID" prop="user_code" width="100"/>
      <el-table-column label="用户昵称" prop="nickname"/>
      <el-table-column label="技能" prop="skill">
        <template slot-scope="scoped">
          <el-tag v-if="scoped.row.skill === 1" type="primary">主持</el-tag>
          <el-tag v-if="scoped.row.skill === 2" type="primary">聊愈师</el-tag>
          <el-tag v-if="scoped.row.skill === 3" type="primary">歌手</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="语音" prop="recording_url">
        <template slot-scope="{row}">
          <audio :src="row.recording_url" controls/>
        </template>
      </el-table-column>
      <el-table-column label="个人特长" prop="strong_point"/>
      <!--      <el-table-column align="center" label="操作" prop="created_at">-->

      <!--        <template slot-scope="{row}">-->
      <!--          <el-button :loading="detailLoading" plain type="primary" @click="handleToVerify(row)">审核</el-button>-->
      <!--          <el-button plain type="danger" @click="handleRefuse(row)">驳回</el-button>-->

      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <cus-pagination
      :limit.sync="dataForm.perPage"
      :page.sync="dataForm.page"
      :total="total"
      @pagination="initData"
    />

    <el-dialog
      :close-on-click-modal="false"
      :visible="detailDialog"
      lock-scroll
      title="主播认证审核"
      width="1200px"
      @close="detailDialog = false"
    >
      <section class="grid grid-cols-5 gap-4 mb-4 text-lg">
        <p><strong>用户id:</strong> {{ detail.user_id }}</p>
        <p><strong>用户昵称：</strong> {{ detail.nickname }}</p>
        <p><strong>所属家族：</strong> {{ detail.guid_name }}</p>
        <p><strong>家族会长：</strong> {{ detail.owner_name }}</p>
        <p><strong>家族人数：</strong> {{ detail.users_count }}</p>
        <p><strong>家族认证主播数：</strong> {{ detail.auth_users_count }}</p>
        <p><strong>房间ID：</strong> {{ detail.room_id }}</p>
        <p><strong>房间名称：</strong> {{ detail.room_name }}</p>
        <p><strong>粉丝数量：</strong> {{ detail.fans_count }}</p>
      </section>

      <section class="grid grid-cols-3 gap-4 mb-4 text-lg">
        <p><strong>注册时间:</strong> {{ detail.created_at }}</p>
        <p><strong>申请时间：</strong> {{ detail.auth_at }}</p>
      </section>

      <p class="text-lg mb-8"><strong>认证类型：</strong> {{ detail.category_name }}</p>

      <section class="flex items-center text-lg">
        <strong>上传资料：</strong>
        <audio :src="detail.url" controls/>
      </section>

      <footer slot="footer">
        <!--        <el-button type="danger" @click="rejectDialog = true">拒绝</el-button>-->
        <el-button type="success" @click="passDialog = true">通过</el-button>
      </footer>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible="rejectDialog"
      lock-scroll
      title="拒绝"
      width="400px"
      @close="rejectDialog = false"
    >
      <p class="mb-4">是否拒绝该记录？</p>
      <el-input v-model="reject_reason" placeholder="请输入拒绝原因（必填）" type="textarea"/>

      <section slot="footer">
        <el-button @click="rejectDialog = false">取消</el-button>
        <el-button :loading="rejectLoading" type="primary" @click="handleReject(row)">确定</el-button>
      </section>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible="passDialog"
      lock-scroll
      title="通过"
      width="400px"
    >
      <section class="text-lg text-center">
        <p class="mb-4">确定通过审核么？</p>
        <p class="text-red-400">审核通过后记得修改主播房间类型</p>
      </section>

      <section slot="footer">
        <el-button @click="passDialog = false">取消</el-button>
        <el-button :loading="passLoading" type="primary" @click="handlePass">确定</el-button>
      </section>
    </el-dialog>

  </el-card>
</template>

<script>
import { presenterAuthByIdPut } from '@/api/KTV'
import { applyListData, applyAuth } from '@/api/anchorManagement/pendingReview'

export default {
  data() {
    return {
      tableList: [],
      typeList: [],
      dateList: undefined,
      dataForm: {
        user_code: '',
        nickname: '',
        start_time: '',
        end_time: '',
        page: 1,
        perPage: 10,
        audit_status: 2
      },
      meta: {
        page: 1,
        perPage: 10

      },
      total: 1,
      /* 弹出框开关 */
      detailDialog: false,
      rejectDialog: false,
      passDialog: false,

      detailLoading: false,
      rejectLoading: false,
      passLoading: false,
      detail: {},
      id: '',
      // 拒绝原因
      reject_reason: ''
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleChangeData(value) {
      if (value) {
        this.dataForm.start_time = value[0]
        this.dataForm.end_time = value[1]
      } else {
        this.dataForm.start_time = undefined
        this.dataForm.end_time = undefined
      }
    },
    handleReset() {
      this.dateList = undefined
      this.dataForm = {
        user_code: '',
        nickname: '',
        start_time: '',
        end_time: '',
        page: 1,
        perPage: 10
      }
    },

    async initData() {
      try {
        // if (this.dateList !== undefined && Array.isArray(this.dateList) && this.dateList.length > 0) {
        //   this.dataForm.date = getDateListToBackend(this.dateList)
        // }

        const { data } = await applyListData(this.dataForm)
        this.dataForm.page = data.current_page
        this.total = data.total
        this.tableList = data.data
      } catch (e) {
        console.error(e)
      }
    },

    handleToVerify(row) {
      // this.detailDialog = true
      let data = {
        id: row.id,
        type: 2
      }
      // this.detailLoading = true
      applyAuth(data).then(({ data }) => {
        this.detail = data
        this.$nextTick()
        this.initData()
      }).finally(() => this.detailLoading = false)
    },

    async handleRefuse(row) {
      this.reject_reason = ''
      this.id = row.id
      this.rejectDialog = true
    },
    /* 拒绝审核 */
    async handleReject() {
      if (this.reject_reason.trim() === '') {
        return void this.$message.warning('请填写拒绝原因！')
      }
      this.rejectLoading = true
      let data = {
        id: this.id,
        refuse_msg: this.reject_reason,
        type: -1
      }
      applyAuth(data).then(res => {
        this.rejectDialog = false
        this.detailDialog = false
        if (res.data) {
          this.$message.info('已拒绝')
          this.initData()
        }
        this.reject_reason = ''
      }).finally(() => this.rejectLoading = false)
    },

    /*
    * 通过审核
    * */
    async handlePass() {
      this.passLoading = true
      presenterAuthByIdPut(this.detail.id, { status: 'pass' })
        .then(res => {
          this.passDialog = false
          this.detailDialog = false
          this.$message.success('以审核通过， 记得修改房间类型')
          this.initData()
        }).finally(() => this.passLoading = false)
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
}
</style>
